<template>
  <div class="center-top">
    <div class="out-box">
      <!-- 激活涟漪效果   -->
      <div :class="activeStyle" />
      <!-- 光点线-->
      <div v-for="item in lineConfig" :class="item.class" />
      <!-- 修饰圆环配置-->
      <div v-for="item in modifiedConfig" :class="item.out">
        <div :class="item.in" />
      </div>
      <!-- 中间部分的各个团队-->
      <template v-for="(item, index) in teamList">
        <div :class="item.positionClass" @click="handleTeamClick(index)">
          <div class="special-effect-position effect-bg" />
          <!-- 旋转圆环 -->
          <img :src="Circle" :class="item.circleClass" />
          <!-- 气泡 -->
          <img :src="Bubbles" :class="item.bubblesClass" />
          <!-- 主图标 -->
          <img :src="Icon" :class="item.iconClass" />
          <span
            class="stage-title"
            :class="activeTeam === index ? 'active-size' : ''"
            >团队{{ index }}</span
          >
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Circle from "@/assets/images/main-effect.png";
import Bubbles from "@/assets/images/special-effect.png";
import Icon from "@/assets/images/air-plane.png";
import { modifiedConfig, lineConfig, teamList } from "./config";
import { ref, onMounted, onUnmounted, watch } from "vue";
import { mockData } from "./mock";
import { useDataStore } from "@/store/data";

const dataStore = useDataStore();
//模拟数据
const chartsData = mockData();
//激活的团队样式
const activeStyle = ref(teamList[0].ripples);
const activeTeam = ref(0);
let interval: NodeJS.Timer | null = null;
//自增
const increment = () => {
  activeTeam.value += 1;
  if (activeTeam.value === teamList.length) {
    activeTeam.value = 0;
  }
  activeStyle.value = teamList[activeTeam.value].ripples;
};
const startInterval = () => {
  interval = setInterval(increment, 20000);
};
const handleTeamClick = (index: number) => {
  clearInterval(<NodeJS.Timer>interval);
  activeTeam.value = index;
  startInterval();
};
watch(
  () => activeTeam.value,
  (newVal) => {
    dataStore.setData(chartsData[newVal]);
  }
);
onMounted(() => {
  dataStore.setData(chartsData[0]);
  startInterval();
});
onUnmounted(() => {
  clearInterval(<NodeJS.Timer>interval);
});
</script>
<style scoped></style>
